<template>
  <div class="workSetting">
    <div class="toolBar">
      <el-button @click="deleteKind" size="small" type="danger"
        ><i class="el-icon-delete"></i> 删除选中</el-button
      >
    </div>
    <div class="content">
      <el-table
        border
        stripe
        size="small"
        :highlight-current-row="true"
        :data="tableData"
        style="width:100%"
        height="490"
        @selection-change="selectDelete"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="username" label="用户"></el-table-column>
        <el-table-column prop="dayWorkTime" label="每日工时"></el-table-column>
        <el-table-column prop="cycleWorkTime" label="工时周期"></el-table-column>
        <el-table-column align="center" label="操作" width="180" fixed="right">
            <template slot-scope="scope">
                <el-button @click="edit(scope.row)" size="mini" type="primary"><i class="el-icon-edit"></i></el-button>
                <el-button @click="removeKind(scope.row.id)" size="mini" type="danger"><i class="el-icon-delete"></i></el-button>
            </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          small
          background
          layout="total, prev, pager, next"
          :total="total"
          @current-change="goSize"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog title="新增工作分类" :visible.sync="showAdd">
        <el-form size="small">
            <el-form-item label="分类名称">
                <el-input v-model="add.workName" placeholder="分类名称"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="add.remark" placeholder="备注"></el-input>
            </el-form-item>
            <el-form-item class="diaBtn">
                <el-button type="primary" @click="addKind">确定</el-button>
                <el-button @click="showAdd = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
  </div>
</template>
<script>
import * as api from "@/js/workTimeApi";
export default {
  name: "WorkSetting",
  data() {
    return {
      searchWord: null,
      tableData: [],
      total: 0,
      deleteIdList: [],
      showAdd: false,
      add:{},
      isEditBtn: false,
      pageNum: 1,
      pageSize: 10,
      userList:[]
    };
  },
  methods: {
    goSize(currentPage){
        this.pageNum = currentPage;
        this.getWorkKindList();
    },
    //查询
    getWorkSetList() {
      api.getWorkSetting({ pageNum:this.pageNum, pageSize: this.pageSize }).then((res) => {
        if (res.status === "success") {
          this.tableData = res.data.records;
          this.total = res.data.total;
          this.tableData.forEach((element,index) => {
            let obj = this.userList.find(value => {
              return element.userId == value.id;
            })
            if(obj != null){
              this.tableData[index].username = obj.name;
            }
          });
        }
      });
    },
    //选择删除
    selectDelete(data){
        let temp = []
        data.forEach(element => {
            temp.push(element.id)
        });
        // console.log(temp)
        this.deleteIdList = temp;
    },
    removeKind(id){
        this.deleteIdList = [];
        this.deleteIdList.push(id);
        this.deleteKind();
    },
    //删除
    deleteKind(){
        this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.deleteWorkSet(this.deleteIdList).then((res) => {
            if (res.status == "success") {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getWorkKindList();
              this.deleteIdList = [];
            } else {
              this.$message({
                type: "error",
                message: res.message,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //新增分类
    addKind(){
      if(this.add.workName == null || this.add.workName.trim() == ''){
        this.$message({
          type: 'warning',
          message: '请输入分类名称后操作'
        })
        return;
      }
        if(this.isEditBtn){
            api.updateWorkSet(this.add).then(res => {
                if(res.status == 'success'){
                    this.$message({
                        type: 'success',
                        message: '修改成功'
                    })
                }else{
                    this.$message({
                        type: 'error',
                        message: res.message
                    })
                }
                this.isEditBtn = false;
                this.showAdd = false;
            })
        }else{
            api.createWorkSet(this.add).then(res => {
            if(res.status == 'success'){
                this.$message({
                    type: 'success',
                    message: '添加成功'
                })
                this.getWorkKindList();
            }else{
                this.$message({
                    type: 'error',
                    message: res.message
                })
            }
            this.showAdd = false;
        })
        }
        
    },
    //编辑
    edit(data){
        this.add = data;
        this.showAdd = true;
        this.isEditBtn = true;
    },
    //获取用户列表
    getUserList() {
      api.getUserList().then((res) => {
        // console.log(res);
        this.userList = res.data
        this.getWorkSetList();
      });
    },
  },
  mounted() {
    this.getUserList();
  },
};
</script>
<style scoped>
.workSetting {
  padding-top: 20px;
}
.toolBar {
  display: flex;
}
.content {
  margin-top: 10px;
}
.diaBtn{
    display: flex;
    justify-content: center;
}
.pagination{
  margin-top: 10px;
  width: 100%;
  text-align: center;
}
</style>